<template>
  <div class="dashboard-container">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="日期" prop="date">
        <el-date-picker
          v-model="form.date"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
          :disabled="isDisable"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入健康知识标题，换行请使用‘/n’代替" />
      </el-form-item>
      <el-form-item label="类别" prop="type">
        <el-select v-model="form.type" placeholder="请选择类别">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.type === 'text'" label="内容" prop="content">
        <el-input v-model="form.content" type="textarea" />
      </el-form-item>
      <el-form-item v-if="form.type === 'image'" label="内容图片" prop="images">
        <el-upload
          class="avatar-uploader"
          action="https://tfnfw.tfnhg.com/oss_upload"
          :show-file-list="false"
          :on-success="handleImages"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.images" :src="form.images" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5Mb,建议尺寸680*500像素</div>
        </el-upload>
      </el-form-item>
      <el-form-item style="text-align: right;">
        <el-button v-if="isMore" type="text" @click="clickMore">更多设置 &gt;</el-button>
        <el-button v-else type="text" @click="clickMore">关闭更多设置 &gt;</el-button>
      </el-form-item>
      <el-form-item v-if="more" label="背景图片" prop="background">
        <el-upload
          class="avatar-uploader"
          action="https://tfnfw.tfnhg.com/oss_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.background" :src="form.background" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item v-if="more" label="标题颜色" prop="title_color">
        <el-color-picker v-model="form.title_color" />
      </el-form-item>
      <el-form-item v-if="more" label="描述颜色" prop="desc_color">
        <el-color-picker v-model="form.desc_color" />
      </el-form-item>
      <el-form-item v-if="more" label="内容颜色" prop="content_color">
        <el-color-picker v-model="form.content_color" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import editor from '@/components/Tinymce'
import { uploadKnowledgeApi, getKnowledgeApi } from '@/api/main'
export default {
  components: {
    // editor
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          const nowTime = Date.now()
          return time.getTime() <= nowTime
        }
      },
      types: [
        { label: '图片', value: 'image' },
        { label: '文本', value: 'text' }
      ],
      more: false,
      isDisable: true,
      form: {
        date: '',
        title: '',
        type: 'text',
        images: '',
        content: '',
        background: '',
        title_color: '',
        desc_color: '',
        content_color: ''
      },
      rules: {
        date: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        background: [
          { required: true, message: '请选择背景', trigger: 'change' }
        ],
        images: [
          { required: true, message: '请上传图片内容', trigger: 'change' }
        ],
        title_color: [
          { required: true, message: '请选择标题颜色', trigger: 'change' }
        ],
        desc_color: [
          { required: true, message: '请选择描述颜色', trigger: 'change' }
        ],
        content_color: [
          { required: true, message: '请选择内容颜色', trigger: 'change' }
        ]
      },
      isMore: true
    }
  },
  created() {
    if (this.$route.params) {
      const date = this.$route.params.date
      getKnowledgeApi({ date: date }).then(res => {
        this.form = res
        if (res.background) {
          this.isMore = false
          this.more = true
        }
      })
    }
  },
  methods: {
    clickMore() {
      this.isMore = !this.isMore
      this.more = !this.more
      if (this.isMore) {
        this.form.background = ''
        this.form.title_color = ''
        this.form.desc_color = ''
        this.form.content_color = ''
      }
    },
    handleAvatarSuccess(res, file) {
      this.form.background = res
    },
    handleImages(res, file) {
      this.form.images = res
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type.split('/')[0] === 'image'
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传图片文件!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.form
          uploadKnowledgeApi(data).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('信息提交成功！')
              this.$refs.ruleForm.resetFields()
              this.$router.push({
                name: 'knowledge_list'
              })
            } else if (res.code === 4001) {
              this.$message.warning(res.msg)
              this.form.date = ''
            } else {
              this.$message.warning(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-upload__tip {
  color: #409eff;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
